<template>
	<view class="egg-main-view">
		<page-head :transparent='true'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right">{{''}}</slot>
		</page-head>
		<view class="egg-main-top">
			<view class="egg-tip-row">
				<text>您还有<text style="color: #FDFA06;">{{availableCount}}次</text>砸金蛋机会</text>
			</view>
			<view class="egg-top-row">
				<view :class="hummer"></view>
				<!-- v-on:touchstart="tohummer(1)" v-on:touchend="hideHummer" -->
				<view class="egg-left-row" @click="toPrize" v-on:touchstart="tohummer(1)">
					<image src="../../static/img/egg/main/egg-left.png" mode="scaleToFill"></image>
				</view>
				<view class="egg-center-row" @click="toPrize" v-on:touchstart="tohummer(2)">
					<image src="../../static/img/egg/main/egg-center.png" mode="scaleToFill"></image>
				</view>
				<view class="egg-right-row" @click="toPrize" v-on:touchstart="tohummer(3)">
					<image src="../../static/img/egg/main/egg-right.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="egg-main-middle">
			<image class="myPrice" src="../../static/img/egg/main/my.png" mode="scaleToFill" @click="toMyPrize"></image>
			<image :src="egain" mode="widthFix"></image>
			<image :src="prise" mode="widthFix"></image>
		</view>
		<view class="egg-main-list">
			<view class="user-list-row">
				<ul class="rowup">
					<li v-for="(item,index) in userList" :key="index">
						<text style="padding-right: 10px;">恭喜 </text> <text style="color: #CF1F18; padding-right: 10px;">{{item.mobile}}
						</text> <text style="padding-right: 10px;">获得</text> <text style="color: #CF1F18;">{{item.prizeAlias}}</text>
					</li>
				</ul>
			</view>
		</view>
		<view class="egg-main-bottom">
			<image :src="eggBottom" mode="widthFix"></image>
		</view>

		<view class="egg-tan-view" v-if="winPrize">
			<view class="tab-row">
				<image class="prize-img-row" :src="prizeImg" mode="scaleToFill" @click="coloseMask"></image>
				<view class="prize-btn-row" v-if="chance">
					<view class="btn-row">
						<!-- <image class="btn-tip" v-if="loginCount" src="../../static/img/egg/tan/more.png" mode="widthFix"></image> -->
						<view class="cardnum-row" v-if="cardNum != ''"><span>卡号：</span> <span>{{cardNum}}</span></view>
						<view class="password-row" v-if="password != ''"><span>卡密：</span> <span>{{password}}</span></view>
						<image class="btn-know" :src="btnCount" mode="scaleToFill" @click="coloseMask"></image>
						<image class="btn-close" src="../../static/img/egg/tan/close.png" mode="scaleToFill" @click="coloseMask"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="egg-my-view" v-if="myprizeVisiable">
			<view class="myprize-row">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMyPrizeList">
					<view class="myprize-list" v-for="(item,index) in myPrizeList" :key="index">
						<view class="my-row">
							<view class="prize-list-row">
								<view class="name-row">
									<view class="name-v">
										{{item.prizeAlias}}
									</view>
									<view v-if="item.cardNum">
										<span class="card-v">卡号：{{item.cardNum}}</span>
										<image class="copy-img" @click="onCopy(item.cardNum)" src="../../static/img/egg/tan/copy.png" mode="scaleToFill"></image>
									</view>
									<view v-if="item.password">
										<span class="card-v">卡密：{{item.password}}</span>
										<image class="copy-img" @click="onCopy(item.password)" src="../../static/img/egg/tan/copy.png" mode="scaleToFill"></image>
									</view>
								</view>
							</view>
							<view class="time-row">
								<view class="time">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<image class="btn-close" src="../../static/img/egg/tan/close.png" mode="scaleToFill" @click="coloseMyPrize"></image>
		</view>
	</view>
</template>

<script>
	import egain from '../../static/img/egg/main/bak-bottom1.png';

	import nothing from '../../static/img/egg/tan/nothing.png';
	import Unqualified from '../../static/img/egg/tan/Unqualified.png';

	import knowe from '../../static/img/egg/tan/knowe.png';
	import again from '../../static/img/egg/tan/again.png';

	import prise from '../../static/img/egg/main/prizelist.png';

	import aqy from '../../static/img/egg/tan/aqy.png';
	import film from '../../static/img/egg/tan/film.png';
	import eightyeightyeighty from '../../static/img/egg/tan/eightyeightyeighty.png';
	import oneeightyeighty from '../../static/img/egg/tan/oneee.png';
	import sixeighty from '../../static/img/egg/tan/sisentiy.png';
	import ten from '../../static/img/egg/tan/ten.png';
	import threezz from '../../static/img/egg/tan/threezz.png';
	import line from '../../static/img/egg/tan/line.png';
	import eggBottom from '../../static/img/egg/main/rules.png'

	export default {
		onShow() {
			this.genCount();
			this.genList();
		},
		onLoad() {
			genCommonData();
		},
		data() {
			return {
				eggBottom,
				prise,
				egain: egain,
				prize: '',
				title: '砸金蛋 送好礼',
				hummer: 'hummer',
				winPrize: false,
				chance: true,
				userList: [],
				availableCount: 0,
				btnCount: knowe,
				prizeImg: '',
				loginCount: false,
				count: [],
				cardNum: '',
				password: '',
				myPrizeList: [],
				page: 1,
				myprizeVisiable: false,
			}
		},
		methods: {
			onCopy(e) {
				uni.setClipboardData({
					data: e,
					success: function(data) {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail: function(err) {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						});
					}
				})
			},
			coloseMyPrize() {
				this.page = 1;
				this.myPrizeList = [];
				this.myprizeVisiable = false;
				document.body.style.position = 'static';
			},
			toMyPrize() {
				this.getMyPrizeList();
				this.myprizeVisiable = true;
				document.body.style.position = 'fixed';
			},
			getMyPrizeList() {
				console.log('this.myPrizeList==' + this.myPrizeList);
				uni.request({
					url: this.$serverUrl + '/coupon-customer/customer/egg/getCustomerWinningList',
					method: 'GET',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
						'content-type': 'application/json'
					},
					data: {
						limit: 4,
						page: this.page
					},
					success: res => {
						let datas = res.data.pageUtils;
						let priMap = datas.list;
						if (priMap.length > 0) {
							this.myPrizeList = this.myPrizeList.concat(priMap);
						}
						this.page++;
					}
				});
			},
			genCount() {
				uni.request({
					url: this.$serverUrl + '/coupon-customer/customer/egg/selectCount',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
						'content-type': 'application/json'
					},
					method: 'GET',
					data: {},
					success: res => {
						let datas = res.data.count;
						this.availableCount = datas.availableCount ? datas.availableCount : 0;
						this.count = datas;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			async genList() {
				uni.request({
					url: this.$serverUrl + '/coupon-customer/customer/egg/getWinningList',
					method: 'GET',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						let datas = res.data;
						this.userList = datas.winningList;
					}
				});
			},
			async toPrize() {
				let datas = this.count;
				document.body.style.position = 'fixed';
				if (datas.availableCount == 0) {
					this.winPrize = true;
					if (datas.loginGiveCount == 2 && datas.giveCount < 3) {
						this.prizeImg = Unqualified;
						this.chance = false;
					} else {
						this.prizeImg = nothing;
						this.chance = false;
					}
				} else {
					// this.hummer = 'hummer';
					this.winPrize = true;
					this.win();
				}
			},
			win() {
				uni.request({
					url: this.$serverUrl + '/coupon-customer/customer/egg/smashEgg',
					method: 'GET',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						// this.hummer = 'hummer';
						let datas = res.data;
						if (datas.code == 50001) {
							this.prizeImg = nothing;
							this.chance = false;
						} else if (datas.code == 50000) {
							this.prizeImg = Unqualified;
							this.chance = false;
						} else if (datas.code == 500) {
							this.prizeImg = Unqualified;
							this.chance = false;
						} else if (datas.code == 404) {
							this.prizeImg = nothing;
							this.chance = false;
						} else {
							this.chance = true;
							let datas = res.data;
							let count = datas.count;
							if (count.availableCount == 0) {
								this.loginCount = true;
								this.btnCount = knowe;
							} else {
								this.loginCount = false;
								this.btnCount = again;
							}
							this.prizeImgChange(datas.prize);
						}
					}
				});
			},
			tohummer(id) {
				/* this.prizeImg = SixSixSix;
				this.btnCount = again;*/
				this.hummer = 'hummer' + id;
			},
			prizeImgChange(prizeList) {
				let num = prizeList.prizeType;
				this.cardNum = prizeList.cardNum;
				this.password = prizeList.password;
				switch (num) {
					case 1:
						this.yueChange(prizeList.prizeAmount)
						break;
					case 2:
						break;
					case 3:
						this.prizeImg = film;
						break;
					case 4:
						this.prizeImg = aqy;
						break;
					default:
						this.yueChange(prizeList.prizeAmount)
						break;
				}
			},
			yueChange(prizeAmount) {
				switch (prizeAmount) {
					case 888:
						this.prizeImg = eightyeightyeighty;
						break;
					case 10:
						this.prizeImg = ten;
						break;
					case 188:
						this.prizeImg = oneeightyeighty;
						break;
					case 300:
						this.prizeImg = threezz;
						break;
					case 68:
						this.prizeImg = sixeighty;
						break;
					default:
						this.prizeImg = ten;
						break;
				}
			},
			hideHummer() {
				this.hummer = 'hummer'
			},
			coloseMask() {
				this.winPrize = false;
				document.body.style.position = 'static';
				this.hummer = 'hummer'
				this.prizeImg = '';
				this.genCount();
				this.genList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.egg-main-view {
		width: 100%;
		padding: 0;
		background-color: #CF1F18;

		.egg-my-view {
			position: fixed;
			top: 0;
			left: 0;
			// z-index: 999;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.9);
			z-index: 9999;
			font-size: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// opacity: 0.2;

			.myprize-row {
				width: 643px;
				height: 629px;
				background: url('../../static/img/egg/tan/myprize.png') no-repeat;
				background-size: 100% 100%;
				color: #860106;

				display: flex;
				justify-content: center;
				align-items: center;

				.scroll-Y {
					width: 580px;
					height: 390px;
					margin-top: 100px;
					// margin-left: 10px;
					// border: #0000FF solid 2px;


					.myprize-list {
						width: 580px;
						height: 120px;
						// border: red solid 1px;
						background-color: #E1DEDD;
						border-radius: 10px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10px;

						.my-row {
							width: 580px;
							height: 100px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.prize-list-row {
								width: 440px;

								.name-v {
									font-size: 24px;
									font: bold;
									font-weight: 900;
								}

								.card-v {
									// font: bold;
									font-size: 18px;
									// font-weight: 600;
									margin-right: 10px;
								}

								.copy-img {
									width: 79px;
									height: 26px;
								}
							}

							.time-row {
								font-size: 16px;
								width: 140px;
							}
						}
					}
				}

			}

			.btn-close {
				margin-top: 70px;
				width: 78px;
				height: 78px;
			}
		}

		.egg-tan-view {
			position: fixed;
			top: 0;
			left: 0;
			// z-index: 999;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.9);
			z-index: 9999;
			font-size: 28px;
			color: white;

			.tab-row {
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: url('../../static/img/egg/tan/line.png') no-repeat;
				background-size: 100% 100%;

				.prize-img-row {
					width: 480px;
					height: 400px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}

				.prize-btn-row {
					width: 100%;
					height: 30%;
					z-index: 8888;
					position: absolute;
					// top: 1000px;
					bottom: 100px;
					left: 180px;

					.btn-row {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.btn-know {
							width: 246px;
							height: 77px;
							margin-top: 20px;
							margin-left: 50px;
						}

						.btn-tip {
							width: 388px;
							height: 29px;
						}

						.btn-close {
							margin-top: 40px;
							margin-left: 128px;
							width: 78px;
							height: 78px;
						}
					}
				}
			}
		}

		.egg-main-top {
			width: 100%;
			height: 1027px;
			background: url('../../static/img/egg/main/main-top.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;

			.hummer {
				width: 160px;
				height: 163px;
				background: url('../../static/img/egg/main/Hammer.gif') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 580px;
				left: 340px;
				display: block;
			}

			.hummer1 {
				width: 160px;
				height: 163px;
				background: url('../../static/img/egg/main/Hammer.gif') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 500px;
				left: 140px;
				display: block;
				// z-index: 6666;
			}

			.hummer2 {
				width: 160px;
				height: 163px;
				background: url('../../static/img/egg/main/Hammer.gif') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 600px;
				left: 340px;
				display: block;
				// z-index: 6666;
			}

			.hummer3 {
				width: 160px;
				height: 163px;
				background: url('../../static/img/egg/main/Hammer.gif') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 500px;
				left: 580px;
				display: block;
				// z-index: 6666;
			}

			.egg-tip-row {
				width: 100%;
				display: flex;
				justify-content: center;
				color: white;
				font-size: 30px;
				position: absolute;
				top: 526px;
			}

			.egg-top-row {
				width: 90%;
				height: 100%;

				.egg-left-row {
					width: 30%;
					height: 280px;
					position: absolute;
					top: 600px;
					left: 5%;

					.hammer-row {
						image {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.egg-center-row {
					width: 33%;
					height: 280px;
					position: absolute;
					top: 720px;
					left: 30%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.egg-right-row {
					width: 30%;
					height: 280px;
					position: absolute;
					top: 600px;
					right: 8%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.egg-main-middle {
			width: 100%;
			display: flex;
			flex-direction: column;

			.myPrice {
				width: 229px;
				height: 49px;
				position: absolute;
				top: 1080px;
				left: 250px;
				z-index: 100;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.egg-main-list {
			width: 100%;
			height: 529px;
			background: url('../../static/img/egg/main/list.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.user-list-row {
				width: 74%;
				height: 280px;
				margin-top: 60px;
				font-size: 26px;
				position: relative;
				overflow: hidden;

				ul {
					width: 100%;
					list-style: none;
				}

				li {
					width: 100%;
					height: 46px;
					line-height: 46px;
					overflow: hidden;
				}

				@-webkit-keyframes rowup {
					0% {
						-webkit-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0);
					}

					100% {
						-webkit-transform: translate3d(0, -170px, 0);
						transform: translate3d(0, -170px, 0);
					}
				}

				@keyframes rowup {
					0% {
						-webkit-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0);
					}

					100% {
						-webkit-transform: translate3d(0, -170px, 0);
						transform: translate3d(0, -170px, 0);
					}
				}

				.rowup {
					width: 100%;
					-webkit-animation: 10s rowup linear infinite normal;
					animation: 10s rowup linear infinite normal;
					position: relative;
					margin-left: -57px;
				}
			}
		}

		.egg-main-bottom {
			width: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
